<template>
  <div class="bpmn-panel" ref="panel">
    <div class="panel-header">
      <bpmn-icon :name="bpmnIconName" />
      <p>{{ bpmnElementName }}</p>
      <p>{{ customTranslate(currentElementType || "Process") }}</p>
    </div>
    <el-collapse style="padding: 0 8px;">
      <component v-for="cp in this.renderComponents" :key="cp.name" :is="cp" />
    </el-collapse>
  </div>
</template>

<script>
import { debounce } from "min-dash";
import Logger from "@utils/Logger";
import BasePanel from "./components/base.vue";
import EventEmitter from "@utils/EventEmitter";
import getBpmnIconType from "@bpmn/bpmn-icons/getIconType";
import { customTranslate } from "@bpmn/additional-modules/Translate";
import { getModeler } from "@bpmn/bpmn-utils/BpmnDesignerUtils";
import BpmnIcon from "@bpmn/components/common/BpmnIcon";
import bpmnIcons from "@bpmn/bpmn-icons";

// 属性组
import ElementGenerations from "./components/ElementGenerations";
import DynamicForm from './components/DynamicForm.vue'
import ElementExtensionProperties from "./components/ElementExtensionProperties.vue"

export default {
  name: "BpmnPanel",
  components: {
    BpmnIcon,
    BasePanel,
    ElementGenerations,
    ElementGenerations,
    DynamicForm
  },
  data() {
    return {
      bpmnIconName: "Process",
      bpmnElementName: "Process",
      currentElementType: undefined,
      currentElementId: undefined,
      customTranslate,
      // 所需渲染的属性面板
      renderComponents: [],
      workInfo: {} // 流程详情
    };
  },
  created() {
    EventEmitter.on("modeler-init", (modeler) => {
      // 导入完成后默认选中 process 节点
      modeler.on("import.done", () => {
        this.setCurrentElement(null);
      });
      // 监听选择事件，修改当前激活的元素以及表单
      modeler.on("selection.changed", ({ newSelection }) => {
        console.log("selection.changed", newSelection[0]);
        this.setCurrentElement(newSelection[0] || null);
      });
      modeler.on("element.changed", ({ element }) => {
        // 保证 修改 "默认流转路径" 等类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
        if (element && element.id === this.currentElementId) {
          this.setCurrentElement(element);
        }
      });
    });
  },
  mounted() {
    this.getWorkFlowInfo()
    !this.currentElementId && this.setCurrentElement();
  },
  methods: {
    // 获取当前流程详情
    getWorkFlowInfo() {
      this.workInfo = this.$route.params.workInfo
    },
    // 设置当前元素
    setCurrentElement: debounce(function (element) {
      let activatedElement = element,
        activatedElementTypeName = "";
      // 初始化-进程元素
      if (!activatedElement) {
        const modeler = getModeler();
        activatedElement =
          modeler
            .get("elementRegistry")
            ?.find((el) => el.type === "bpmn:Process") ||
          modeler
            .get("elementRegistry")
            ?.find((el) => el.type === "bpmn:Collaboration");

        if (!activatedElement) {
          return catchError("No Element found!");
        }
      }
      activatedElementTypeName = getBpmnIconType(activatedElement);

      this.$store.commit("setElement", {
        element: activatedElement,
        id: activatedElement.id,
      });
      this.currentElementId = activatedElement.id;
      this.currentElementType = activatedElement.type.split(":")[1];

      this.bpmnIconName = bpmnIcons[activatedElementTypeName];
      this.bpmnElementName = activatedElementTypeName;

      this.setCurrentComponents(activatedElement);
      EventEmitter.emit("element-update", activatedElement);

      Logger.prettyPrimary("Selected element changed", `ID: ${activatedElement.id} , type: ${activatedElement.type}`);
      Logger.prettyInfo("Selected element businessObject", activatedElement.businessObject);
    }, 100),
    // 设置当前节点的属性组
    setCurrentComponents(element) {
      this.renderComponents.splice(0, this.renderComponents.length); // 清空
      // 重设
      this.renderComponents.push(ElementGenerations);
      this.renderComponents.push(DynamicForm)
      // this.renderComponents.push(ElementDocumentations);
      // isCanbeConditional(element) &&
      //   this.renderComponents.push(ElementConditional);
      // isJobExecutable(element) &&
      //   this.renderComponents.push(ElementJobExecution);
      this.renderComponents.push(ElementExtensionProperties);
      // isExecutable(element) &&
      //   this.renderComponents.push(ElementExecutionListeners);
      // isAsynchronous(element) &&
      //   this.renderComponents.push(ElementAsyncContinuations);
      // isStartInitializable(element) &&
      //   this.renderComponents.push(ElementStartInitiator);
      // this.renderComponents.push(ElementExtensionField);
    },
  },
};
</script>

<style lang="scss" scoped></style>
